<template>
    <div id="top-header">
        <div class="top-header">
            <div class="logo"></div>
            <div class="menu">
                <el-row type="flex" class="row-bg" justify="space-between">
                    <el-col>
                        <router-link to="/home" tag="div"  class="m-item" :class="'home' === $router.name?'active':''">
                            <p class="item-tit">资讯</p>
                            <div class="item-ico"></div>
                        </router-link>
                    </el-col>
                    <el-col>
                        <router-link to="/projects" tag="div"  class="m-item" :class="'projects' === $router.name?'active':''">
                            <p class="item-tit">项目战场</p>
                            <div class="item-ico"></div>
                        </router-link>
                    </el-col>
                    <el-col>
                        <router-link to="/hero" tag="div"  class="m-item" :class="'hero' === $router.name?'active':''">
                            <p class="item-tit">英雄列表</p>
                            <div class="item-ico"></div>
                        </router-link>
                    </el-col>
                    <el-col>
                        <router-link to="/rank" tag="div"  class="m-item" :class="'rank' === $router.name?'active':''">
                            <p class="item-tit">英雄榜</p>
                            <div class="item-ico"></div>
                        </router-link>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        }
    }
</script>

<style>
.router-link-active .item-ico {
    display: block!important;
}
.router-link-active .item-tit {
    color:rgba(195,24,31,1)!important;
    font-weight: bold!important;
}
</style>


<style scoped>
#top-header {
    height: 100px;
    background-color: #fff;
}
.top-header {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.logo {
    margin-top: 19px;
    width: 124px;
    height: 58px;
    background: url(../assets/logo.png) no-repeat 100% 100%;
    background-size: cover;
}
.menu {
    width: 725px;
    text-align: center;
    margin-top: 38px;
    font-size:24px;
}
.m-item {
    cursor: pointer;
}
.item-ico {
    width: 14px;
    height: 14px;
    margin: 10px auto 0;
    background: url(../assets/m_item_icon.png) no-repeat 100% 100%;
    background-size: cover;
    display: none;
}
.active .item-ico {
    display: block;
}
.item-icon-active {
    display: block;
}
.item-tit {
    color:rgba(51,51,51,1);
    font-weight: bold;
}
.item-tit:hover{
    color:rgba(195,24,31,1);
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.item-tit.active {
    color:rgba(195,24,31,1);
    font-weight: bold;
}
</style>